<template>
  <div class="about">
    <h3 style="color:#576c99">欢迎来到ajie在线聊天系统!请输入用户名点击进入聊天室</h3>
    <van-row type="flex" justify="center">
      <van-col span="6"></van-col>
      <van-col span="6"
        >

        <input type="text" placeholder="请输入用户名" autofocus v-model="username" />
        <van-button @click="handleEnterBtnClick" color="#576c99" size="normal" style="margin-top: 30px;">进入聊天室</van-button></van-col>
      <van-col span="6"></van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: "",
    };
  },
  mounted() {
    const username = localStorage.getItem("username");
    if (username) {
      this.$router.push("/");
      return;
    }
  },
  methods: {
    handleEnterBtnClick() {
      const username = this.username.trim();
      if (username.length < 6) {
        alert("用户名不小于6位");
        return;
      }
      localStorage.setItem("username", username);
      this.$router.push("/");
    },
  },
};
</script>

<style scoped lang="css">
.about {
  text-align: center;
  margin: 30px 30px;
}

.about input{
  width: 300px;
  height: 45px;
  padding: 6px 8px;
  border: 2px solid;
  border-color: #576c99;
  caret-color:#576c99;
  caret-shape:underscore;
}

</style>
